<template>
  <el-dialog
    v-model="dialogVisible"
    title="大桥介绍"
    :width="isMobile ? '80%' : '30%'"
    @close="close"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="btn">{{ currentRow?.title }}</div>
    </template>
    <div class="content">
      <div v-html="currentRow?.desc"></div>
    </div>
  </el-dialog>
</template>
Z
<script setup>
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => ({}),
  },
});
const isMobile = inject("isMobile");
const dialogVisible = ref(false);
let dom = null;
const open = (text) => {
  dom = text;
  dialogVisible.value = true;
  console.log("currrentRow", props.currentRow);
};
const close = () => {
  if (dom) {
    dom.style.opacity = "0";
  }
  dialogVisible.value = false;
};
defineExpose({ open, close });
</script>

<style scoped lang="scss">
.btn {
  text-align: center;
  color: #fff;
  font-size: var(--dialog--header-font-size);
}
.content {
  padding: 0;

  .img {
    width: 100%;
    height: 100%;
  }

  .text {
    margin-top: 10px;
  }
}
</style>
